<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>弹性盒子范例</h1>
        <style>
            html {
                background-color: white;
            }

            body {
                width:80%;
                margin: 0 auto;
                border: 2px solid black;
            }
            header {
                background-color: purple;
            }

            section {
                display: flex;
                flex-direction: row;
            }

            article {
                background-color: skyblue;
            }
        </style>
    </header>
    <section>
        <article>
            <h2>第1段</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa fuga sint, placeat soluta repellendus quam temporibus minus, omnis beatae vel quae tenetur debitis molestiae quasi, ex corporis suscipit blanditiis veritatis.</p>
        </article>
        <article>
            <h2>第2段</h2>
            <p>Ut vero ratione inventore perspiciatis nostrum nisi magni dolore maiores temporibus voluptatem? Accusamus id, reprehenderit veritatis quasi labore nostrum aliquid suscipit doloribus reiciendis possimus, necessitatibus officia natus? Magnam, aperiam dolore.</p>
        </article>
        <article>
            <h2>第3段</h2>
            <p>Suscipit dolorem ut doloribus qui. Magni reiciendis et molestias, odio tenetur quasi dolores molestiae autem, esse, illum quis porro ipsum culpa distinctio? Reiciendis odit, rerum placeat eligendi nobis quisquam quam?</p>
        </article>
    </section>
    <footer>

    </footer>
    
</body>
</html>